Exporting and
inserting Fireworks HTML into FrontPage
Product:
Fireworks
Platform:
All
Versions:
MX
ID:
16633
Introduction Macromedia Fireworks
can be used successfully to create images and HTML files for use with
Microsoft FrontPage. When creating graphics for the web in Fireworks,
developers can create images, or they can create complete HTML files that
contain JavaScript-driven behaviors and links to the images.
This TechNote
is written for developers who want to want to use Fireworks to create both
images and behaviors for those images, and who want to bring this content
into a file in FrontPage. This TechNote describes the best practices for
inserting your Fireworks HTML into FrontPage while retaining all of the
behaviors you created in your Fireworks file.
Prerequisites Using and understanding this TechNote
requires a working knowledge of the following concepts.
This TechNote
assumes you have a PNG file already created in Fireworks that uses
behaviors. Refer to the Fireworks help system for information on
using Fireworks to draw objects and create buttons.
Refer to the Additional
information section for more TechNotes relating to working with
Fireworks-generated code in FrontPage.
Developers should be able to follow the section on Inserting
Fireworks HTML into FrontPage without knowing HTML, but some
familiarity with HTML will be useful. Also see Details
about Fireworks Pop-up Menu code for FrontPage (TechNote 16635)
for more detail about the code that Fireworks generates for Pop-up
Menus.
Preparing your Fireworks document for
FrontPage Before you export your Fireworks PNG for insertion
into a FrontPage document, you must specify that Fireworks writes
FrontPage-compatible code. This is done in the HTML Setup dialog
box.
1
With a file open in Fireworks, choose File > HTML Setup
and click the General tab.
Note: The HTML Setup
dialog box is also accessible from the Export dialog box by clicking
the Options button.
2
Choose FrontPage HTML from the HTML Style pop-up menu, then
click OK.
Exporting
the Fireworks PNG file for use in FrontPage Once the file is
completed and ready for export, follow the steps below to export the HTML
and images that will be used for your file. Remember to save the PNG file
so that you will have the original source file.
1
Choose File > Export to export your Fireworks file.
2
Browse to the folder used for your FrontPage website by
clicking the Save In pop-up menu. The location you choose here is
the folder to which the Fireworks HTML file will be saved. If you
already have another HTML file that you want to insert this content
into, save the Fireworks HTML file to the same folder.
Note: The location of the HTML file is important for your
HTML file to work with FrontPage. All links to external files in the
exported Fireworks file will be Document Relative. This
means that if the Fireworks HTML is not exported to the correct
FrontPage Web folder, you will have to spend additional time fixing
the links after you export.
3
Check the file name entered by default in the File name text
box. If this is not the file name you want for the HTML file, enter
a different file name in the File name text box.
4
Choose HTML and Images from the Save As pop-up
menu, set HTML to Export HTML File and, if your Fireworks document
has slices on it, choose Export Slices from the Slices pop-up menu.
5
Optional: At the bottom of the Export dialog box,
choose Put Images in Subfolder. It is good practice to keep your
images in a location where you can keep them organized. After you
choose Put Images in Subfolder, the Browse button at the bottom of
the dialog box becomes active.
Choose
the default images folder A default folder path appears
to the right of the button indicating that Fireworks will put
the exported image files in a folder named "images" in the
same folder chosen in step 2. If an images folder does not
already exist, one will be created.
Designate
a different folder to store the images If you want to
store your images in a different folder, click the Browse
button. A dialog box appears that allows you to either select
an existing folder or create a new folder to place your images
in. Because the links from the HTML to the images are document
relative, the folder must be inside of the FrontPage Web
directory structure, but it does not need to be in the
directory where the HTML is going to be exported. Click Select
"folder name" (Windows) or Choose (Macintosh).
Note: All images
exported from the Fireworks file, including any that are generated
for the Pop-up Menus, will be exported to this folder. The Fireworks
HTML will contain document relative links to these images. If the
HTML is moved to another directory without the accompanying images
folder, these links will be broken and you will have to fix each
one.
6
Click Save to
export your HTML and images.
Tip: It is a good
idea to open the HTML file in a browser to make sure it looks and
behaves as you expect. Check to make sure all the images appear, any
rollovers and buttons work, animations play as specified, and that
the page functions as you planned.
Seeing what
Fireworks has exported In this single export command, several files
have been created. All of these files are required to allow the behaviors
to work properly and the images to display.
At least one HTML
file has been created, called by the name designated in step 3 of
Exporting the Fireworks PNG file.
If you added
Pop-up Menus to the Fireworks file, a JavaScript file (.js) has been
created. This file controls the Pop-up Menus.
Any number of image files (as defined by the slices in your
document) have been created and stored in a separate folder
(assuming you chose a separate folder for the images).
The following image shows an example of the file structure
you might see in your FrontPage site folder.
Inserting
Fireworks HTML into FrontPage Once the files have been exported
from Fireworks, use the following steps to insert the code from the
Fireworks-generated HTML file into your existing HTML file. Because
FrontPage's Insert > File menu command does not add the
Fireworks-generated JavaScript into the <head> of the document, any
JavaScript code created by Fireworks must be copied separately, as
described below.
1
Launch FrontPage and open the Fireworks HTML file you just
exported.
Tip: Click the
Preview Tab in FrontPage to verify the JavaScript behaviors work. If
the rollovers, nav bar buttons, Pop-up Menus and animations all work
properly, you are ready to continue.
2
Open the
FrontPage HTML file that you wish to insert the Fireworks content
into, and click on the page at the location where you want the
Fireworks content to appear.
3
Choose Insert
> File in FrontPage and navigate to the folder where the
Fireworks HTML is located. Select the HTML file and click Open. The
Fireworks HTML will be inserted between the <body> tags of
your FrontPage HTML file.
Note: If your FrontPage
HTML from Fireworks does not have any behaviors, this should be all
you need to do.
4
Since Fireworks
writes its JavaScript function code and any path to the external
JavaScript file to <script> tags in the <head> tag, this
code is not inserted in the body of the FrontPage document. You will
need to copy this code from the Fireworks HTML file into the
FrontPage HTML file. Click on the HTML tab of the Fireworks document
and locate the <title> tag. Beneath the <title> tag, you
should see the <script> tags. Select and copy the section of
JavaScript code from the Fireworks HTML, as highlighted below.
Note: If your file has
Pop-up Menus, this code will contain two <script> tags (one
contains the path to the external JavaScript file, and one contains
the functions). If your file does not have Pop-up Menus, then you
should only see one <script> tag.
5
Bring up your
FrontPage HTML file and click on the HTML tab to view the code.
Insert the cursor just before the </head> tag and paste.
Note: If there are any
existing JavaScript tags with functions inside your FrontPage HTML
file, consolidate all of the functions between a single pair of
<script> tags. The only exception should be the call to the
external JavaScript file at the beginning of the Fireworks
<script> section if the Fireworks HTML contains a Pop-up
Menu.
The following
steps are only necessary if your Fireworks HTML contains Pop-up
Menus.
6
Switch to the
Fireworks HTML file and click on the HTML tab to view HTML. Locate
the line that calls the mmLoadMenus function (this line should be
immediately after the <body> tag). Select this line and copy
it.
7
Switch to the
FrontPage HTML file and click on the HTML tab to view HTML. Insert
the cursor immediately after the <body> tag, and
paste.
Test
your page Click the
Preview tab in FrontPage to view your page and check the behaviors and
images.
Additional information The following TechNotes
are written for FrontPage users. These TechNotes will be most useful for
readers if consulted in the order listed.
(This TechNote) Exporting and inserting Fireworks HTML into
FrontPage (TechNote 16633)
